import React, { Component } from 'react';

import styled from 'styled-components' 

import { Tabs, WhiteSpace , Badge } from 'antd-mobile';

const PromoContair=styled.div`
flex:1
.back{
    position:absolute
    left:0.15rem
    font-size:0.25rem
    line-height:0.39rem
    z-index:999
}

.am-tabs-default-bar-tab-active{
    color:#fe4070;
}
.am-tabs-default-bar-underline{
    border-color:#fe4070;!important
}
.am-tabs-default-bar-tab{
    padding-left:0.3em
}
.am-tabs-default-bar-content{
    
}
`

class PromoCard extends Component{
    constructor(props){
        super(props)
        this.state={
            tabs : [
                { title: '现金券' },
                { title: '红包' },
                ],
            tabs2 : [
                { title: '未使用', sub: '1' },
                { title: '已使用', sub: '2' },
                { title: '已过期', sub: '3' },
                ],
            tabs3 : [
                { title: '未使用', sub: '1' },
                { title: '已使用', sub: '2' },
                { title: '已过期', sub: '3' },
                ],
        }
    }
   // 返回上一届
   Goback=()=>{
    const { go }=this.props.history
    go(-1)
    }

    render(){
        return(
            <PromoContair>
                <div className="back" onClick={this.Goback}>
                        <i className="fa fa-angle-left"></i>
                    </div>
                <div>
                    <Tabs tabs={this.state.tabs} initialPage={0} animated={false} useOnPan={false} >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
                    <WhiteSpace />
                            <Tabs tabs={this.state.tabs2}
                            initialPage={0}
                            tabBarPosition="top"
                            renderTab={tab => <span>{tab.title}</span>}
                            >
                            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '5.8rem', backgroundColor: '#eee' }}>
                                你还没有现金券
                            </div>
                            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '5.8rem', backgroundColor: '#eee' }}>
                                你还没有现金券
                            </div>
                            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '5.8rem', backgroundColor: '#eee' }}>
                                你还没有现金券
                            </div>
                            </Tabs>
                    <WhiteSpace />
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center',  backgroundColor: '#eee' }}>
                            <WhiteSpace />
                                    <Tabs tabs={this.state.tabs3}
                                    initialPage={0}
                                    tabBarPosition="top"
                                    renderTab={tab => <span>{tab.title}</span>}
                                    >
                                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '5.8rem', backgroundColor: '#eee' }}>
                                        你还没有红包
                                    </div>
                                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '5.8rem', backgroundColor: '#eee' }}>
                                        你还没有红包
                                    </div>
                                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '5.8rem', backgroundColor: '#eee' }}>
                                        你还没有红包
                                    </div>
                                    </Tabs>
                            <WhiteSpace />
                    </div>
                    </Tabs>
                    <WhiteSpace />
                </div>
            </PromoContair>
        )
    }
}

export default PromoCard